<template>
  <div>
    <div class="el-menu-item-group__title" style="margin-top: -5px">
          <div class="chform-title">正在更改表单结构，请谨慎操作！</div>
    </div>
    <div class="el-menu-item-group__title" style="margin-top: 15px">
      <span class="medium" ><i class="item-text">选择要更改的表：</i></span>
      <el-dropdown
        style="height: 20px"
        size="large"
        type="primary"
        placement="bottom-start"
        :hide-on-click="true"
        trigger="click"
        @command="handleCommand" >
        <el-input
          min="120px"
          max="120px"
          :readonly= true
          :value="dataForm.table_name"
          prefix-icon="el-icon-date"
          placeholder='点击选择表'
          suffix-icon='el-icon-arrow-down'
          class="el-dropdown-link">
        </el-input>
            <div class="box">
              <el-dropdown-menu  style="height: 320px" slot="dropdown">
                <div style="overflow: scroll; height: 300px">
                <el-dropdown-item v-for="item in formlist['tableNamesCH']" :key="item" :command=item>{{item}}</el-dropdown-item>
                <el-dropdown-item divided command='bDefault' >默认</el-dropdown-item></div>
              </el-dropdown-menu>
            </div>
      </el-dropdown>
      <el-button @click="formPrint" >查看该表结构</el-button>
      <form-print v-if="form_print" ref="form_print"></form-print>
    </div>

    <div  v-if="is_down">
      <el-form :model="dataForm" :rules="dataRule" style="margin-top: 15px" status-icon ref="dataForm" >
        <el-form-item prop="cn_col">
          <span ><i class="el-menu-item-group__title"><i class="item-text">输入要添加的列中文名：</i></i></span>
          <el-input  placeholder="输入中文列名" v-model="dataForm.cn_col">
          </el-input>
        </el-form-item>

        <el-form-item prop="en_col">
          <span class="medium" ><i class="el-menu-item-group__title"><i class="item-text">输入要添加的列英文名：</i></i></span>
          <el-input   placeholder="输入英文列名" v-model="dataForm.en_col"></el-input>
        </el-form-item>
        <el-form-item prop="type">
            <span class="medium" style="margin-top: -10px"><i class="el-menu-item-group__title"><i class="item-text">选择类型</i></i></span>
          <el-dropdown
            size="large"
            type="primary"
            placement="bottom-start"
            :hide-on-click="true"
            trigger="click"
            @command="typeCommandHandler" >
            <el-input
              min="120px"
              max="120px"
              :readonly= true
              :value="this.dataForm.type"
              placeholder='此项不能为空'
              suffix-icon='el-icon-arrow-down'
              class="el-dropdown-link">
            </el-input>
            <el-dropdown-menu  slot="dropdown" >
                <div style="overflow-y: scroll">
                  <el-dropdown-item v-for="item in typeList" :key="item" :command=item>{{item}}</el-dropdown-item>
                  <el-dropdown-item divided command='bDefault' >默认</el-dropdown-item></div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%;height: 35px" type="danger" @click="addHandler">点击添加</el-button>
        </el-form-item>

<!--        <el-form-item>-->
<!--          <el-button style="width: 100%;height: 35px"  @click="addHandler">导出excel模版</el-button>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
  </div>
</template>

<script>
import formPrint from './form-print'
export default {
  data () {
    return {
      dataForm: {
        table_name: '',
        cn_col: '',
        en_col: '',
        type: ''
      },
      typeList: ['varchar', 'text', 'nvarchar', 'datetime', 'int', 'bigint', 'float', 'bit', 'date', 'decimal', 'smallint', 'smalldatetime', 'nchar', 'char'],
      formlist: [],
      form_print: false,
      is_down: false,
      dataRule: {
        cn_col: [
          { required: true, message: '中文列名不能为空', trigger: 'blur' }
        ],
        en_col: [
          { required: true, message: '英文列名不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    formPrint
  },
  activated () {
    this.getTableName()
  },
  methods: {
    // 获取表名
    getTableName () {
      this.$http({
        url: this.$http.adornUrl('/get/table/names'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.formlist = data.data
        }
      })
    },
    handleCommand (command) {
      if (command === 'bDefault') {
        this.dataForm.table_name = ''
        this.is_down = false
      } else {
        this.$message('选择了' + command + '表')
        this.dataForm.table_name = command
        this.is_down = true
      }
    },

    // 点击换成哪个表
    typeCommandHandler (command) {
      if (command === 'bDefault') {
        this.dataForm.type = ''
      } else {
        this.dataForm.type = command
      }
    },
    addHandler () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$confirm('向数据库表中添加列存在风险，是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/update/add/field'),
              method: 'post',
              data: {
                'tableNameC': this.dataForm.table_name,
                'fieldC': this.dataForm.cn_col,
                'fieldE': this.dataForm.en_col,
                'type': this.dataForm.type,
                'fieldLen':this.dataForm.en_col.length
              }
            }).then(({data}) => {
              if (data.code === 0) {
                this.$confirm('添加成功，是否打印excel模版？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消'
                }).then(() => {
                  this.$http({
                    url:this.$http.adornUrl('/get/file/model'),
                    method:'get'
                  }).then(({data})=>{
                  })
                })
              }
            })
          })
        }
      })
    },
    formPrint () {
      if (this.dataForm.table_name === '') {
        this.$message('请先选择一个表再查看其结构')
      } else {
        this.form_print = true
        this.$nextTick(() => {
          this.$refs.form_print.init(this.dataForm.table_name)
        })
      }
    }
  }
}
</script>


<style lang="scss">
.el-menu-item-group__title .item-text {
  font-size: 16px;
  font-style: normal;
}
.chform-title {
  font-size: x-large;
  color: #f56c6c;
  font-style: normal;
  text-align: center;
}
.el-dropdown-menu {
  width: 200px;
  /*position: absolute!important;*/
  /*top:30px!important;*/
  /*left:0px!important;*/
}
.project-dropdown {
  height: 320px;
}
.project-dropdown .page-component__scroll .el-scrollbar__wrap {
  overflow: visible;
  overflow-x: hidden;
}
</style>
